{extend name="public/base" /}
{block name="head"}
	<link href="/static/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="/static/umeditor/third-party/jquery.min.js"></script>
	<script type="text/javascript" src="/static/umeditor/third-party/template.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="/static/umeditor/umeditor.config.js"></script>
	<script type="text/javascript" charset="utf-8" src="/static/umeditor/umeditor.min.js"></script>
	<script type="text/javascript" src="/static/umeditor/lang/zh-cn/zh-cn.js"></script>
	<!--markdown-->
  <link rel="stylesheet" href="/static/markdown/css/editormd.css" />
	<script src="/static/markdown/examples/js/jquery.min.js"></script>
	<script src="/static/markdown/editormd.min.js"></script>

	<style type="text/css">
		.fuyun-content{position: relative;background: #fff;}
		.width900{max-width: 900px;}
		.layui-tab-content{}
	  .avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}
	  .avatar-uploader .el-upload:hover {border-color: #20a0ff;}
	  .avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 150px;height: 150px;line-height: 150px;text-align: center;}
	  .avatar{width: 150px;height: 150px;display: block;}
	  .editor-box{margin: 0 auto;}
	  .edui-container{margin:0 auto;}
	  .edui-container{margin:0 auto;}
	</style>
{/block}
{block name="body"}
<div id="fuyun-app" class="fuyun-app">
  <div class="fuyun-content">
  	<form class="layui-form" method="post" action="{:Url('update')}">
			<div class="layui-tab" lay-filter="tab-box">
			  <ul class="layui-tab-title">
			    <li class="layui-this">基本信息</li>
			    <li lay-id="editor">文章内容</li>
			    <li>资源下载</li>
			  </ul>
			  <div class="layui-tab-content">
			    <div class="layui-tab-item layui-show">
						<div class="layui-form-item width900">
							<label class="layui-form-label"><font class="color-red">*</font>分类</label>
							<div class="layui-input-block">
								<select name="category_id">
									{volist name="category" id="cate"}
										<option value="{$cate.id}" {if condition="$cate['id'] == $articleModel['category_id']"}selected{/if} >{$cate.category_name}</option>
									{/volist}
								</select>
							</div>
				    </div>

						<div class="layui-form-item width900">
							<label class="layui-form-label"><font class="color-red">*</font>标题</label>
							<div class="layui-input-block">
								<input id="title" type="text" name="title" placeholder="请输入标题" class="layui-input" value="{$articleModel.title}">
							</div>
							
				    </div>
						<div class="layui-form-item width900">
							<label class="layui-form-label">描述</label>
							<div class="layui-input-block">
								<textarea name="describe" placeholder="请输入描述" class="layui-textarea">{$articleModel.describe}</textarea>
							</div>
				    </div>
						<div class="layui-form-item width900">
							<label class="layui-form-label"><font class="color-red">*</font>展示时间</label>
							<div class="layui-input-block">
								<input class="layui-input" type="text" name="show_time" onclick="layui.laydate({elem: this, festival: true, format: 'YYYY-MM-DD'})" value="{$articleModel.show_time}">
							</div>
				    </div>
						<div class="layui-form-item width900">
							<label class="layui-form-label">是否发布</label>
							<div class="layui-input-block">
								<input type="radio" name="status" value="1" title="发布" {if condition="$articleModel['status'] eq 1"}checked{/if} >
								<input type="radio" name="status" value="0" title="不发布" {if condition="$articleModel['status'] eq 0"}checked{/if} >
							</div>
				    </div>

			    </div>
			    <div class="layui-tab-item">
					  <div class="layui-form-item">
					    <label class="layui-form-label">编辑器类型</label>
					    <div class="layui-input-block">
					      <input type="radio" lay-filter="editor-type" name="editor_type" value="0" title="普通编辑器" {if condition="$articleModel['editor_type'] eq 0"}checked{/if}>
					      <input type="radio" lay-filter="editor-type" name="editor_type" value="1" title="Markdown" {if condition="$articleModel['editor_type'] eq 1"}checked{/if}>
					    </div>
					  </div>
						<div id="editormd" {if condition="$articleModel['editor_type'] eq 0"}style="display:none"{/if} >
              <textarea style="display:none;">{if condition="$articleModel['editor_type'] eq 1"}{$articleModel.markdown}{/if}</textarea>
            </div>

			    	<div class="layui-input-block editor-box" {if condition="$articleModel['editor_type'] eq 1"}style="display:none;"{/if} >
							<script type="text/plain" id="myEditor" name="content" style="height:720px;">{if condition="$articleModel['editor_type'] eq 0"}{$articleModel.content}{/if}</script>
						</div>
			    </div>
			    <div class="layui-tab-item">
				    <div class="layui-form-item">
							<label class="layui-form-label"><font class="color-red">*</font>文章封面</label>
							<el-upload
							  class="avatar-uploader"
							  action="{:Url('/admin/upfile/uploadimage')}"
							  :show-file-list="false"
							  :on-success="handleAvatarSuccess"
							  :before-upload="beforeAvatarUpload">
							  <img v-if="cover" :src="cover" class="avatar">
							  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>

							<input type="hidden" name="cover" :value="cover">
				    </div>
			    </div>
			  </div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<input type="hidden" name="id" value="{$articleModel.id}">
					<button class="layui-btn" lay-submit lay-filter="ajaxForm">修改</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
    <a href="{:Url('index')}" class="layui-btn layui-btn-small layui-btn-normal back-btn"><i class="fa fa-plus-square margin-right-5"></i>返回</a>
  </div>


</div>

<script type="text/javascript">
	layui.use(['form','layer','element','laydate'], function(){
		var form = layui.form();
		var element = layui.element();
		var laydate = layui.laydate;
		var um;

		form.on('submit(ajaxForm)', function(data){
			var that = this;
			// $(that).attr("disabled","disabled");
			$.ajax({ 
				type: "post", 
				url: data.form.action, 
				data: data.field,
				dataType: 'json', 
				success: function(result){ 
					if(result['code'] == 1){
						layer.msg(result['msg']);
						window.setTimeout(function(){
							window.location.href = document.referrer;
						},800);
					}else{
						layer.msg(result['msg']);
						$(that).removeAttr("disabled");
					}
				} 
			});
			return false;
		});

    markdown = editormd("editormd", {
      path : "/static/markdown/lib/" ,
      width  : "90%",
      height : 720,
      saveHTMLToTextarea : true,
      htmlDecode : "style,script,iframe|on*",   
    });
    um = UM.getEditor('myEditor',{
    	'initialFrameWidth' : "90%",
    });

		// //markdown编辑器
	  element.on('tab(tab-box)', function(){
	  	if('editor' == this.getAttribute('lay-id')){
	  		if("{$articleModel.editor_type}" == 1){
			    markdown = editormd("editormd", {
		        path : "/static/markdown/lib/" ,
		        width  : "90%",
		        height : 720,
	          saveHTMLToTextarea : true,
	          htmlDecode : "style,script,iframe|on*",   
			    });
	  		}
	  	}
	  });


		form.on('radio(editor-type)', function(data){
			editorType = data.value;
			if(data.value==1){
				$(".editor-box").css("display","none");
				$("#editormd").css("display","block");
		    markdown = editormd("editormd", {
	        path : "/static/markdown/lib/" ,
	        width  : "90%",
	        height : 720,
          saveHTMLToTextarea : true,
          htmlDecode : "style,script,iframe|on*",   
		    });

			}else{
				$(".editor-box").css("display","block");
				$("#editormd").css("display","none");
			}
		});
	})


var Main = {
    data() {
      return {
	    	cover: [],
      };
    },
    created: function(){
    	this.cover = "{$articleModel.cover}";
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.cover = res.url;
      },
      beforeAvatarUpload(file) {
      	return true;
      }

    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#fuyun-app')
</script>

{/block}



		